import { NgIf } from '@angular/common';
import { Component } from '@angular/core';
import {
  RouterLink,
  RouterLinkActive,
  RouterOutlet,
} from '@angular/router';
import { Flower } from './element-injector/flower';

@Component({
  selector: 'app-root',
  standalone: true,
  providers: [
    { provide: Flower, useValue: new Flower('🪻') },
    // { provide: Animal, useValue: new Animal('🐇') },
  ],
  template: `
    <div class="navbar bg-base-100">
      <div class="navbar-start">
        <div class="dropdown">
          <div
            tabindex="0"
            role="button"
            class="btn btn-ghost btn-circle"
            (click)="showMenu = !showMenu"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 6h16M4 12h16M4 18h7"
              />
            </svg>
          </div>
          <ul
            *ngIf="showMenu"
            tabindex="0"
            class="menu menu-md mt-3 z-[1] p-2 shadow-lg bg-base-100 border-indigo-600 border-2 rounded-box w-52 fixed"
          >
            <li>
              <a
                [routerLink]="['basic-demo']"
                routerLinkActive="bg-indigo-600 text-white hover:bg-indigo-800 hover:text-white"
                (click)="showMenu = !showMenu"
              >
                Basic Demo
              </a>
            </li>
            <li>
              <a
                [routerLink]="['environment-injector']"
                routerLinkActive="bg-indigo-600 text-white hover:bg-indigo-800 hover:text-white"
                (click)="showMenu = !showMenu"
              >
                Environment Injector
              </a>
            </li>
            <li>
              <a
                [routerLink]="['element-injector']"
                routerLinkActive="bg-indigo-600 text-white hover:bg-indigo-800 hover:text-white"
                (click)="showMenu = !showMenu"
              >
                Element Injector
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="navbar-center">
        <a
          [routerLink]="['/']"
          class="btn btn-ghost text-xl"
          >DI Demo</a
        >
      </div>
      <div class="navbar-end"></div>
    </div>

    <main class="mt-6 h-screen flex justify-center">
      <router-outlet />
    </main>
  `,
  imports: [
    NgIf,
    RouterOutlet,
    RouterLink,
    RouterLinkActive,
  ],
})
export class AppComponent {
  showMenu = false;
}
